<template lang="pug">
.view.cp-product-man-status.fix-flex-pos
  .list-detail-wrap
    ProductList(@change="changeProduct")
    ProductDetail(
      :detail="prodcutDetail",
      :loading="detailLoading",
      style="margin-top: 12px")
  .struct-wrap
    el-card.card(v-loading="cardLoading")
      .card-header(slot="header")
        span 状态冻结/解冻
        i.btn.el-icon-edit(type="text", @click="editStatus", v-show="!cardEditing")
      .card-body
        .mask(v-show="!cardEditing", @click="showAlert")
        ul.level-one-wrap
          li.level-one(v-for="(item, index) in statusList", :key="index")
            span(v-text="item.name")
            ul.level-two-wrap
              li.level-two(v-for="(citem, cindex) in item.children", :key="cindex")
                span.level-two-title(v-text="`${citem.name} : `")
                el-radio(v-model="citem.value", :label="0") 冻结
                el-radio(v-model="citem.value", :label="1") 解冻
        .button-wrap(v-show="cardEditing")
          el-button(type="primary", @click="submitStatus") 确定
          el-button.btn-after(@click="cancelStatus") 取消
</template>

<script>
import ProductData from '@/data/product';
import ProductList from '@/components/manage/product/ProductList';
import ProductDetail from '@/components/manage/product/ProductDetail';

export default {
  name: 'prostatus',
  components: {
    ProductList,
    ProductDetail
  },
  data() {
    return {
      prodcutDetail: [],
      detailLoading: true,
      cardLoading: true,
      cardEditing: false,
      statusList: [],
      cacheList: []
    };
  },
  methods: {
    changeProduct (productId) {
      this.highLghtId = productId;
      this.detailLoading = true;
      this.cardLoading = true;
      setTimeout(() => {
        this.prodcutDetail = ProductData.productDetail;
        this.detailLoading = false;

        this.statusList = ProductData.productStatus;
        this.cacheList = this.deepCopy(this.statusList);
        this.cardLoading = false;
      }, 1000);
    },
    deepCopy (arr) {
      return JSON.parse(JSON.stringify(arr));
    },
    editStatus () {
      this.cardEditing = true;
    },
    submitStatus () {
      this.cardEditing = false;
      this.cacheList = this.deepCopy(this.statusList);
    },
    cancelStatus () {
      this.cardEditing = false;
      this.statusList = this.deepCopy(this.cacheList);
    },
    showAlert () {
      this.$message.info('请点击右上角Icon，开启编辑状态');
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../../../styles/utils"
$ROLEWIDTH: 320px
$PADDINGWIDTH: 16px
$TABHEIGHT: 40px
.cp-product-man-status
  .list-detail-wrap
    position: absolute
    top: $PADDINGWIDTH
    bottom: $PADDINGWIDTH
    left: $PADDINGWIDTH
    width: $ROLEWIDTH
    // border: 1px solid gray
    overflow-x: hidden
    overflow-y: auto
  .struct-wrap
    position: absolute
    top: $PADDINGWIDTH
    bottom: $PADDINGWIDTH
    left: $ROLEWIDTH + 32px
    right: $PADDINGWIDTH
    // border: 1px solid gray
    background: white
    overflow-x: hidden
    overflow-y: auto
    //
    .card
      position: relative
      min-height: 100%
    .el-card
      box-shadow: none
    .el-card__header
      padding: 12px 20px
      background-color: #F2F2F2
    .card-header
      text-align: center
      position: relative
      .btn
        position: absolute
        right: 0
        top: 50%
        font-size: 20px
        margin-top: -10px
        cursor: pointer
        &:hover
          color: #5D9BFB
    .card-body
      position: relative
      .mask
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        background-color: transparent
        z-index: 99
      .level-one
        font-size: 15px
        margin-bottom: 16px
      .level-two-wrap
        padding-left: 32px
      .level-two
        margin-top: 4px
        font-size: 14px
        .level-two-title
          margin-right: 16px
    .button-wrap
      text-align: center
      .btn-after
        margin-left: 40px
</style>
